<template>
	<view>
		<view class="goods-attribute" :style="[outModuleCss]">
			<view :style="[moduleBgCss]" class="module-bg"></view>
			<view class="attribute-section" :class="activityCutPriceId || is_seckill ? 'pt0' : ''">
				<!-- sku选择 -->
				<view class="sku-row" v-if="
            (productType == 0 || productType == 3) &&
            !activityCutPriceId &&
            !is_seckill
          " @click="chooseSku">
					<view class="row-label">{{ $t("goods.choosedSku") }}</view>
					<view class="row-content">
						<view class="selected-sku">{{ skuText }}</view>
						<i class="iconfont icon-arrow-right"></i>
					</view>
				</view>
				<view class="split-line" v-if="
            (showAddress || showNearbyShop) &&
            productType == 0 &&
            !activityCutPriceId
          "></view>
				<!-- 送至地址 -->
				<view class="address-row" v-if="showAddress && productType == 0" @click="gotoAddressList"
					:style="!address ? 'align-items: flex-start' : ''">
					<view class="row-label">{{ $t("goods.send") }}</view>
					<view :class="['row-content', !address ? 'add-bottom' : '']">
						<view :class="['address-info']">
							<i class="iconfont icon-a-map"></i>
							<text v-if="!address">{{ $t("diy.chooseAddress") }}</text>
							<view class="info-text" v-else>{{ address.province }} {{ address.city }}
								{{ address.district }} {{ address.detail }}
							</view>
							<!--  -->
						</view>
						<i class="iconfont icon-arrow-right"></i>
					</view>
				</view>
				<!-- 地址详情 -->
				<view class="send-info" v-if="showAddress && address && productType == 0">
					<view class="row-label"></view>
					<view class="row-content">
						<span>{{ $t("diy.waiting") }}</span>
					</view>
				</view>
				<view class="split-line" v-if="showAddress && showNearbyShop && shop && productType == 0"></view>
				<!-- 门店 -->
				<view class="shop-info" v-if="showNearbyShop && shop && mdId == 0"
					@click="$utils.toUrl('/pages/shop-nearby/shop-nearby?is_order=1')">
					<view class="row-label">{{ $t("goods.shop") }}</view>
					<view class="row-content">
						<view class="shop-msg">
							<view class="top-msg">
								<i class="iconfont icon-store"></i>
								<text>{{ shop.name }}</text>
							</view>
							<i class="iconfont icon-arrow-right"></i>
						</view>
						<view class="address-detail">
							{{ shop.address }}
						</view>
					</view>
				</view>

				<view class="shop-info" v-if="showNearbyShop && mdId != 0">
					<view class="row-label">{{ $t("goods.shop") }}</view>
					<view class="row-content">
						<view class="shop-msg">
							<view class="top-msg">
								<i class="iconfont icon-store"></i>
								<text>{{ mdData.name }}</text>
							</view>
						</view>
						<view class="address-detail" v-if="mdData.address">
							<text class="distance"
								v-if="mdData.distance">{{ $t("diy.distance") }}{{ mdData.distance }}</text>
							<text class="point" v-if="mdData.distance"></text>
							<text class="detail">{{ mdData.address }}</text>
						</view>
					</view>
				</view>
				<view class="split-line" v-if="showFreight && productType == 0"></view>
				<!-- 运费 -->
				<view class="freight-row" v-if="showFreight && productType == 0">
					<view class="row-label">{{ $t("goods.freight") }}</view>
					<view class="row-content" v-if="is_area == 1">{{
            $t("goods.areaLimit")
          }}</view>
					<view class="row-content" v-else>{{
            freight ? freight : $t("goods.free")
          }}</view>
				</view>

				<view class="split-line" v-if="goodsInfo.delivery_rules"></view>
				<!-- 秒杀配送规则 -->
				<view class="freight-row delivery_rules" v-if="goodsInfo.delivery_rules">
					<view class="row-label">备注</view>
					<view class="delivery_rules_rig">
						<view>{{ goodsInfo.delivery_rules.name }}</view>
						<view class="delivery_rules">
							{{ goodsInfo.delivery_rules.times }}
						</view>
					</view>
				</view>

				<!-- 服务列表 -->
				<view class="ensure-section" :style="[ensureBorder]" v-if="goodsInfo.service_list.length">
					<view class="ensure-item" v-for="(item, index) in goodsInfo.service_list" :key="index">
						<i class="iconfont icon-success"></i>
						<text>{{ item }}</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="activityCutPriceId" class="goods-attribute" :style="[outModuleCss]"
			@click="$utils.toUrl('/marketing/curPrice/rule/index')">
			<view :style="[moduleBgCss]" class="module-bg"></view>

			<view class="curPrice">
				<view class="curPriceHd">
					<view class="title">砍价流程</view>

					<view class="more">
						<text>详细规则</text>
						<i class="iconfont icon-arrow-right"></i>
					</view>
				</view>
				<view class="curPriceCon">
					<image mode="aspectFill" :src="asyncImgs.index.cut_price_flow1"></image>
					<view>点击砍价</view>
					<text></text>
					<text></text>
					<image mode="aspectFill" :src="asyncImgs.index.cut_price_flow2"></image>
					<view>找人帮砍</view>
					<text></text>
					<text></text>
					<image mode="aspectFill" :src="asyncImgs.index.cut_price_flow3"></image>
					<view>砍到最低后购买</view>
				</view>
			</view>
		</view>

		<!-- 新增门店选择 -->
		<view class="footerStyle" v-if="mdData.name !== undefined">
			<view class="footerStyle_df">
				<view class="" style="font-weight: 600;">
					适用自提点
				</view>
				<view class="" @click="goAdderss()">
					查看适用自提点
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="df information">
				<view class="" style="width: 80rpx;height: 80rpx;background-color: #CCC;border-radius: 10rpx;">
					<u-image border-radius="10rpx" width="80rpx" height="80rpx" :src="mdData.cover_url"></u-image>
				</view>
				<view class="" style="margin-left: 20rpx;">
					<view class="convenience">
						{{mdData.name}}
					</view>
					<view class="addressStyle" style="margin-top: 4rpx;">
						{{ mdData.address }}
					</view>
				</view>
			</view>
			<view class="information2">
				<view class="df">
					<view class="">
						<u-icon size="28rpx" color="#8C8C8C" name="map"></u-icon>
					</view>
					<view class="ml12">
						{{ mdData.address }}
					</view>
					<view class="">
						<u-icon color="#8C8C8C" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="df mt10">
					<view class="">
						<u-icon size="28rpx" color="#8C8C8C" name="clock"></u-icon>
					</view>
					<view class="ml12" v-if="mdData.open_status==1">
						营业中 {{mdData.start_time}}:{{ mdData.end_time}}
					</view>
					<view class="ml12" v-if="mdData.open_status==0">
						已打烊
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		diySysPageMixin
	} from "@/components/diySystemPage/mixins/index.js";

	export default {
		name: "",
		props: {
			propsData: {
				type: Object,
				default: {},
			},
			goodsInfo: {
				type: Object,
				default: {},
			},
			skuText: {
				type: String,
				default: "",
			},
			mdId: {
				type: String,
				default: "0",
			},
			mdData: {
				type: Object,
				default: {},
			},
			addressList: {
				type: Array,
				default: [],
			},
			activityCutPriceId: {
				type: [String, Number],
				default: "",
			},
			is_seckill: {
				type: [String, Number],
				default: "",
			}
		},
		mixins: [diySysPageMixin],
		components: {},
		data() {
			return {
				// sku选择框
				show: false,
				// 收获地址信息
				address: null,
				// 运费
				freight: 0,
				// 门店信息
				shop: null,
				// 区域限制购买
				is_area: 0,
			};
		},
		mounted() {
			if (!this.addressList.length) return;
			let [data] = this.addressList.filter((d) => {
				return d.is_default == 1;
			});
			if (data) {
				this.address = data;
			}
		},
		watch: {},
		computed: {
			showAddress() {
				return this.propsData.params.showAddress;
			},
			showNearbyShop() {
				return this.propsData.params.showNearbyShop;
			},
			showFreight() {
				return this.propsData.params.showFreight;
			},
			productType() {
				return this.goodsInfo.product_type;
			},
			ensureBorder() {
				return {
					borderRadius: `0 0 ${this.outModuleCss.borderRadius} ${this.outModuleCss.borderRadius}`,
				};
			},
		},
		methods: {
			// 选择门店
			goAdderss() {
				let change_shop=uni.getStorageSync('change_shop');
				if(change_shop==1){
					 this.$utils.toUrl("/goods/selectSelfPickup/selectSelfPickup");
				} else {
					return
				}
			},


			// 点击选择sku
			chooseSku() {
				if (this.activityCutPriceId) return;
				this.$emit("chooseSku");
			},
			// 获取收获地址门店运费信息
			async getInfo() {
				try {
					var address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
					var shop = uni.getStorageSync("order_select_shop");
					var param = {
						id: this.goodsInfo.id,
						address_id: address ? JSON.parse(address).id : 0,
						shop_id: shop ? JSON.parse(shop).id : 0,
					};
					const res = await this.$allrequest.goods.getAddressInfo(param);
					if (res.code == 0) {
						this.freight = res.data.express_price;
						this.shop = res.data.shop;
						this.is_area = res.data.is_area;
					}
				} catch (e) {}
			},
			updateAddress() {
				let address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
				if (address) {
					address = JSON.parse(address);
					this.address = address;
				} else {
					this.address = null;
				}
			},
			gotoAddressList() {
				this.$emit("gotoAddressList");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.ml12 {
		margin-left: 12rpx;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.information2 {
		margin-top: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.information {
		padding: 24rpx 0rpx;
		border-bottom: 1px dashed #EFEFEF;
	}

	.addressStyle {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.convenience {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.df {
		display: flex;
		align-items: center;
	}

	.footerStyle_df {
		display: flex;
		justify-content: space-between;
	}

	.footerStyle {
		width: 750rpx;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-bottom: 24rpx;
		padding: 34rpx 24rpx;
	}

	.goods-attribute {
		width: 100%;
		position: relative;
		font-family: PingFang SC;

		.unionAll {
			margin-top: 20rpx;
			padding: 0 24rpx;
			background: #ffffff;
			// border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			padding-bottom: 60rpx;
			border-bottom: 30rpx solid #f2f2f2;

			.coupon-dis {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.dis-money {
					color: #f0250e;
					font-weight: bold;
				}
			}

			.coupon-back {
				display: flex;
				align-items: center;

				>span {
					display: block;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background: #f0250e;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #ffffff;
					margin-right: 10rpx;
				}

				p {
					font-size: 28rpx;
					font-weight: bold;

					span {
						font-size: 28rpx;
						color: #ff6113;
						font-weight: bold28;
					}
				}
			}
		}

		.attribute-section {
			width: 100%;
			padding-top: 4.8vw;

			&.pt0 {
				padding-top: 0;
			}

			.sku-row {
				width: 100%;
				display: flex;
				align-items: flex-start;
				padding-left: 4.8%;

				.row-label {
					width: 82rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #262626;
				}

				.row-content {
					flex: 1;
					display: flex;
					align-items: flex-start;
					padding-right: 4.8vw;
					padding-bottom: 4vw;

					.selected-sku {
						flex: 1;
						font-size: 26rpx;
						font-weight: 400;
						color: #262626;
					}

					.iconfont {
						font-size: 22rpx;
						color: #000000;
					}
				}
			}

			.split-line {
				width: 84.26%;
				height: 1px;
				background: #f6f6f6;
				float: right;
			}

			.address-row {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 4.8vw 0 0 4.8vw;

				.row-label {
					width: 82rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #262626;
				}

				.row-content {
					display: flex;
					align-items: center;
					padding-right: 4.8vw;
					width: 87.6%;
					justify-content: space-between;

					.address-info {
						font-size: 26rpx;
						font-weight: 400;
						color: #262626;
						display: flex;
						align-items: center;
						width: 91.6%;

						.iconfont {
							font-size: 30rpx;
							color: #f8260a;
							font-weight: 500;
							margin-right: 4rpx;
						}

						text {
							max-width: 93.52%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.info-text {
							white-space: nowrap;
							width: 70vw;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.iconfont {
						font-size: 22rpx;
						color: #000000;
					}
				}

				.add-bottom {
					padding-bottom: 3.67vw;
				}
			}

			.send-info {
				width: 100%;
				display: flex;
				align-items: center;
				padding-left: 4.8%;

				.row-label {
					width: 82rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #262626;
				}

				.row-content {
					flex: 1;
					display: flex;
					align-items: center;
					padding-right: 4.8vw;
					font-size: 26rpx;
					font-weight: 400;
					color: #262626;
					padding-bottom: 4.8vw;

					text:nth-child(1) {
						color: #fa230a;
						padding: 0;
						background: none;
					}
				}
			}

			.shop-info {
				width: 100%;
				display: flex;
				align-items: flex-start;
				padding: 4.8vw 0 3.67vw 4.8vw;

				.row-label {
					width: 82rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #262626;
				}

				.row-content {
					flex: 1;
					padding-right: 4.8vw;
					position: relative;
					top: -2rpx;

					.shop-msg {
						display: flex;
						align-items: center;
						flex: 1;

						.top-msg {
							flex: 1;
							display: flex;
							align-items: center;
							font-size: 26rpx;
							font-weight: 400;
							color: #262626;

							.iconfont {
								font-size: 22rpx;
								color: #000000;
								font-weight: 500;
								margin-right: 4rpx;
							}

							.icon-store {
								font-size: 34rpx;
							}

							text {
								max-width: 68vw;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}

					.address-detail {
						font-size: 24rpx;
						font-weight: 400;
						color: #8c8c8c;
						padding-left: 39rpx;
						max-width: 75vw;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: flex;
						align-items: center;

						.point {
							width: 2px;
							height: 2px;
							border-radius: 50%;
							background-color: #000000;
							margin: 0 2vw;
						}
					}
				}
			}

			.freight-row {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 4.8vw 0 4.8vw 4.8vw;

				.row-label {
					width: 82rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #262626;
				}

				.row-content {
					flex: 1;
					display: flex;
					align-items: flex-start;
					padding-right: 4.8vw;
					font-size: 26rpx;
					font-weight: 400;
					color: #262626;
				}
			}

			.ensure-section {
				width: 100%;
				padding: 2.67vw 4.8vw;
				display: flex;
				flex-wrap: wrap;
				background: #fbfcfb;

				.ensure-item {
					display: flex;
					align-items: center;
					margin: 2rpx 4.26vw 2rpx 0;

					.iconfont {
						color: #8c8c8c;
						margin-right: 4rpx;
					}

					text {
						font-size: 22rpx;
						font-weight: 400;
						color: #8c8c8c;
					}
				}
			}
		}

		.module-bg {
			width: 100%;
			height: 100%;
			z-index: -1;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.delivery_rules {
		align-items: start !important;

		.delivery_rules_rig {
			flex-direction: column;
		}

		.delivery_rules {
			padding-top: 6rpx;
			color: #ff5c26;
		}
	}

	.curPrice {
		padding: 24rpx 4.8vw;
	}

	.curPriceHd {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 26rpx;
			font-weight: bold;
			color: #262626;
		}

		.more {
			display: flex;
			align-items: center;

			text {
				font-size: 24rpx;
				color: #8c8c8c;
			}

			.icon-arrow-right {
				font-size: 22rpx;
			}
		}
	}

	.curPriceCon {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		height: 122rpx;
		background: #fff6f5;
		border: 2rpx solid #eebab9;
		border-radius: 20rpx;

		image {
			margin-left: 20rpx;
			width: 46rpx;
			height: 46rpx;
			border-radius: 32px;
			background: #fdf1f0;
		}

		view {
			margin: 0 14rpx;
			font-size: 22rpx;
			color: #262626;
		}

		text {
			margin: 0 4rpx;
			width: 6rpx;
			height: 6rpx;
			background: #eebab9;
			border-radius: 50%;
		}
	}
</style>